// pages/rain/rain.js
Page({
  onShow: function() {
    this.startRain();
  },
  startRain: function() {
    const ctx = wx.createCanvasContext('myCanvas', this);
    this.drawRain(ctx);
    setTimeout(() => this.startRain(), 30); // 调整时间以控制雨滴下落的速度
  },
  drawRain: function(ctx) {
    const width = wx.getSystemInfoSync().windowWidth;
    const height = wx.getSystemInfoSync().windowHeight;
    const raindropWidth = 2; // 雨滴的宽度
    const raindropHeight = 10; // 雨滴的高度
    const raindropColor = 'rgba(255, 255, 255, 0.6)'; // 调整雨滴颜色为朦胧白色

    // 设置背景为黑色
    ctx.setFillStyle('black');
    ctx.fillRect(0, 0, width, height);

    // 定义并绘制雨滴列表
    for (let i = 0; i < 300; i++) { // 定义雨滴数量
      const x = Math.random() * (width - raindropWidth);
      const y = Math.random() * height * Math.random(); // 随机生成起始位置，有时从顶部开始，有时从中间开始

      // 使用 alpha 通道来实现朦胧效果
      ctx.fillStyle = raindropColor;
      ctx.fillRect(x, y - raindropHeight, raindropWidth, raindropHeight);

      // 更新雨滴位置
      ctx.fillStyle = 'rgba(255, 255, 255, 0)'; // 重置颜色以实现朦胧的拖尾效果
      ctx.fillRect(x, y - raindropHeight - 1, raindropWidth, raindropHeight + 1);
    }

    ctx.draw();
  }
});